<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="创建时间">
          <el-date-picker
                  v-model="dateRange"
                  size="small"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >发布家庭作业</el-button>
        </el-col>
        
      </el-row>
  
      <el-table ref="uiTable" v-loading="loading" :data="subjList" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" width="50"/>
        <el-table-column label="发布日期" align="center" prop="subjCode" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="班级名称" align="center" prop="className" :show-overflow-tooltip="true" />
        <el-table-column label="科目名称" align="center" prop="subjectName" />
        <el-table-column label="允许评论" align="center" prop="isComments" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isComments==1" type="success">允许评论</el-tag>
                <el-tag v-if="scope.row.isComments==0" type="info">不允许评论</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="作业内容" align="center" prop="workContent" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    circle type="warning" icon="el-icon-service"
                    @click="showComments(scope.row)"
                    title="查看评论消息"
            />
            <el-button
                    size="mini"
                    circle type="success" icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    title="修改"
            />
            <el-button
                    size="mini"
                    circle type="danger" icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    title="删除"
            />
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <el-dialog title="查看评论消息" :visible.sync="commentsVisible" width="60%" >
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{workDetails.title}}</span>
                <el-button style="float: right; padding: 3px 0" type="text">{{workDetails.time}}</el-button>
            </div>
            
            <div class="text item" v-html="workDetails.content">

            </div>
            
        </el-card>
        <div v-if="commentsList.length>0">
            <el-divider content-position="left">评论内容</el-divider>
            <el-collapse accordion v-model="activeNames">
                <el-collapse-item v-for="item,index in commentsList" :key="item.id" :name="item.id" >
                    <template slot="title">
                        <i class="el-icon-user-solid" style="font-size: 25px;color:#48bbf0"></i>&nbsp;&nbsp;{{item.commentsUser}} 
                        <span style="padding: 0px 20px;color: #abacac;">{{ parseTime(item.createTime) }}</span>
                    </template>
                    <div v-html="item.commentsTxt" style="padding: 0px 30px;font-size: 16px;"></div>
                    <div class="text item" style="text-align: right;">
                        <el-link type="primary" v-if="item.isReply==1" @click="getReply(item,index)">查看回复</el-link> <el-link type="primary" @click="replyInput(item,index)">回复</el-link>
                        
                        
                    </div>
                    <div v-for="reply in item.replyList" :key="reply.id" style="padding: 0px 30px;font-size: 16px;">
                        <el-card class="box-card" >
                            <div slot="header" class="clearfix">
                                <i class="el-icon-user-solid" style="font-size: 20px;color:#48bbf0"></i>
                                <span style="font-size: 14px;">{{reply.commentsUser}} 回复：<span style="color: #abacac;">{{reply.replyUser}} </span>
                                <span style="padding: 0px 20px;color: #abacac;">{{ parseTime(reply.createTime) }}</span></span>
                                <el-button style="float: right; padding: 3px 0" type="text" @click="replyInput(item,index,reply)">回复</el-button>
                            </div>
                            <div class="text item">
                                {{reply.commentsTxt}}
                            </div>
                        </el-card>
                    </div>
                    <el-input :id="'reply-'+index" placeholder="填写您要评论的内容" v-if="item.showReply==1" v-model="item.content" style="margin-top: 24px;">
                        <el-button slot="prepend" >回复：{{ item.replyAccount }}</el-button>
                        <el-button slot="append" icon="el-icon-s-promotion" @click="submitAddReply(item,index)"></el-button>
                        <el-button slot="append" icon="el-icon-close" @click="closeReplyInput(item,index)" style="margin-left:3px"></el-button>
                    </el-input>
                </el-collapse-item>
            </el-collapse>
        </div>
        
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {pageList, deleteById,findCommentsDetails,findreplyDetails,addReply} from "@/api/educational/homeWork";
  
  export default {
    name: "termTime",
    data() {
      return {
        commentsVisible:false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        indexs:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 科目表格数据
        subjList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 状态数据字典
        statusOptions: [],
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          type: undefined,
          status: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        workDetails:{},
        commentsList:[],
        activeNames:[],
        replyList:[]
      };
    },
    created() {
      this.getList();
      /*this.getDicts("t_sys_normal_disable").then(response => {
        this.statusOptions = response.data;
      });*/
    },
    methods: {
        // scrollToposition(key){
        //     console.log(key)
        //     document.querySelector("#"+key).scrollIntoView()
            
        // },
        submitAddReply(item,idx){
            const params ={
                pid:item.replyPid,
                commentsTxt: item.content,
                homeworkId:item.homeworkId
            }
            addReply(params).then(resp=>{
                this.msgSuccess("回复提交成功");
                this.getReply(item,idx)
                this.closeReplyInput(item,idx)
            })
        },
        //关闭回复框
        closeReplyInput(item,idx){
            item.showReply='0'
            item.content=null
            this.commentsList.forEach((item1,index)=>{
                if(idx==index){
                    
                    item1 = item
                }
            })
            
            console.log(item)
            this.$forceUpdate()
        },
        //展开回复框
        replyInput(item,idx,reply){
            if(reply){
                item.replyAccount = reply.commentsUser
                item.replyPid = reply.id
            }else{
                item.replyAccount = item.commentsUser
                item.replyPid = item.id
            }
            item.showReply='1'
            this.commentsList.forEach((item1,index)=>{
                if(idx==index){
                    item1 = item
                }
            })
            console.log(item)
            // this.scrollToposition('reply-'+idx)
            this.$forceUpdate()
        },
        //查询评论的回复
        getReply(item,idx){
            let list = []
            findreplyDetails({pid: item.id}).then(resp=>{
                this.getReplyList(resp.data,list)
                this.commentsList.forEach((item1,index)=>{
                    if(idx==index){
                        item1.replyList = list
                    }
                    this.$forceUpdate()
                })
            })

        },
        getReplyList(data,list){
            data.forEach(item=>{
                console.log(item)
                list.push(item)
                if(item.children.length>0){
                    this.getReplyList(item.children,list)
                }
            })
        },
        //查询评论列表
        getComments(id){
            this.activeNames=[]
            findCommentsDetails({homeworkId: id}).then(resp=>{
                this.commentsList = resp.data
                this.commentsList.forEach(item=>{
                    this.activeNames.push(item.id)
                    item.showReply = 0
                })
            })
        },
        //查看评论
      showComments(row){
        this.commentsVisible = true
        this.workDetails={
            title: row.className + ' ' + row.subjectName + "作业",
            content : row.workContent.replace(/\n/g, '<br/>'),
            time : this.parseTime(row.createTime),
        }
        this.getComments(row.id)
      },
      /** 查询字典类型列表 */
      getList() {
        this.loading = true;
        pageList(this.queryParams).then(response => {
            this.subjList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      // 字典状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.status);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          name: undefined,
          type: undefined,
          status: "0",
          remark: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$router.push("/educational/homeWork/pulishHomeWork")
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
  
        this.indexs = [];
        selection.forEach((val, index) => {
          this.subjList.forEach((v, i) => {
            // id 是每一行的数据id
            if(val.id == v.id){
              console.log(i+1);
              this.indexs.push(i+1);
            }
          })
        }) ;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.$router.push({path:"/educational/homeWork/pulishHomeWork", query:{id: row.id}})
      },
      handleSocre(row) {
        this.$router.push({path:"/teacher/evaluation/mytask/taskScoreData", query:{teutId: row.teutId}})
      },
      
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认删除序号为"' + this.indexs + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return deleteById(row);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(function() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportType(queryParams);
        }).then(response => {
          this.fileDownload(response.data, "学年学期.xlsx");
        }).catch(function() {});
      },
      /** 格式化日期 */
      dateFormateBegin:function (date) {
        if (date == undefined) {
          return ""
        } else {
          return moment(date).format("YYYY-MM-DD 00:00:00");
        }
      },
       /** 格式化日期 */
       dateFormateEnd: function(date) {
        if (date == undefined) {
          return ""
        } else {
          return moment(date).format("YYYY-MM-DD 23:59:59");
        }
      }
  
    }
  };
  </script>
  